<template>
	<view class="down-bar">
		<!-- 每一个bar -->
		<view class="down-bar-item" v-for="(bar, index) in downBarList" :key="index">
			<!-- 标题部分 -->
			<view class="title" @click="clickDownView(bar)" :class="{'active': bar.active }">
				<text>{{bar.name}}</text>
				<text v-if="bar.active" class="iconfont icon-down1"></text>
				<text v-else class="iconfont icon-up"></text>
			</view>
			<!-- 下拉框部分 -->
			<view class="drop-down-box" v-if="bar.showBox">
				<!-- 分类 -->
				<view v-if="bar.type === 'category'" class="category">
					<Category :value="bar" @getList="getList" />
				</view>
				<!-- 列表 -->
				<view class="option" v-else :class="{'active': bar.name === item.name}"
				v-for="item in bar.list" @click="changeOption(bar, item)">{{item.name}}</view>
			</view>
			<!-- 遮罩层 -->
			<view class="cover" v-if="bar.showBox"></view>
		</view>
	</view>
</template>

<script>
	import Category from '@/pages/category/category'
	export default {
		components: {
			Category
		},
		props: {
			downBars: {
				type: Array,
				default: () => [
					{
						name: '综合排序',
						active: false, // 当前是否选中
						showBox: false, // 是否显示下拉框
						type: 'sort',
						list: [
							{id: null, name: '综合排序'},
							{id: 'new', name: '最新排序'},
							{id: 'hot', name: '热门排序'},
						]
					},
					{
						id: null,
						name: '全部分类',
						active: false, // 当前是否选中
						showBox: false, // 是否显示下拉框
						type: 'category'
					}
				]
			},
			// 从分类页面--搜索页面--此组件 传递过来的 分类标签
			categoryLabel: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				downBarList: []
			}
		},
		created() {
			this.downBarList = this.downBars
		},
		methods: {
			/**
			 * 点击bar 时，让自身高亮或不高亮，让其他bar 隐藏
			 * @param {Object} bar
			 */ 
			clickDownView(bar) {
				// 1、下拉框的状态肯定取反
				bar.showBox = !bar.showBox
				// 2、肯定为选中状态
				bar.active = true
				// 3、修改其他bar 的 active 为false，并且 showBox 也为false
				this.downBarList.forEach(item => {
					if (bar !== item) {
						item.active = item.showBox = false
					}
				})
			},
			/**
			 * 点击列表中的值时触发的事件
			 * @param {Object} bar 
			 * @param {Object} option
			 */
			changeOption(bar, option) {
				// 让bar 的标题，改成当前option 的name
				bar.name = option.name
				// 让当前list 隐藏
				bar.active = true
				bar.showBox = false
				// 调用父组件方法，查询数据
				// this.$emit('searchList', {[bar.type]: option.id})
				this.$emit('searchList',`${bar.type}: ${option.id}`)
			},
			getList(label) {
				this.setCategoryBarTitle(label)
				uni.showToast({
					title: `更新列表，参数为：分类id ${label.categoryId}, labelId ${label.id}`
				})
			},
			setCategoryBarTitle(label) {
				if (label) {
					const categoryBar = this.downBars[this.downBars.length - 1]
					categoryBar.name = label.name
					categoryBar.categoryIndex = label.categoryIndex
					return categoryBar.active = true
				}
			}
		},
		watch: {
			categoryLabel: {
				handler (label) {
					this.setCategoryBarTitle(label)
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.active {
		color: $mxg-text-color-blue;
	}
	.cover {
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: black;
		opacity: 0.2 !important;
	}
	.down-bar {
		display: flex;
		justify-content: space-around;
		// 粘顶
		position: -webkey-sticky;
		position: sticky;
		z-index: 100;
		top: var(--window-top);
		background-color: #FFFFFF;
		.down-bar-item {
			flex: 1;
			// 标题部分
			.title {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}
			// 下拉框部分
			.drop-down-box {
				position: absolute;
				background-color: #fff;
				left: 0;
				right: 0;
				z-index: 999 !important;
				.category {
					height: 500rpx;
				}
				.option {
					padding: 15rpx 0 15rpx 50rpx;
				}
			}
		}
		
	}
</style>
